<template>
    <div class="section-wrap">
        <div class="form-section">
            <tab active-color='#2269ff'>
                <tab-item selected
                          @on-item-click="$router.push('basicMessageDetail')">
                    <i>基本信息</i>
                </tab-item>
                <tab-item @on-item-click="$router.push({path:'idCardMessage',query:{id:param.data.id}})">证件信息</tab-item>
                <!--<tab-item @on-item-click="$router.push({path:'trainMessage',query:{id:param.data.id}})">培训信息</tab-item>-->
                <tab-item @on-item-click="$router.push({path:'breakMessage',query:{id:param.data.id}})">违章信息</tab-item>
                <tab-item @on-item-click="$router.push({path:'healthMessage',query:{id:param.data.id}})">职业健康</tab-item>
            </tab>
            <div class="photo">
                <img :src="listArr.pic?listArr.pic:'../../../assets/avatar2.png'">
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>姓名</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="listArr.name">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>性别</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="listArr.sex">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>籍贯</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="listArr.nativePlace">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>民族</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="listArr.nation">
                    </div>
                </group>
            </div>
            <!-- <div class="form-item form-item-style1">
                <div class="label-title">
                <label>身份证号</label>
                </div>
                <group>
                <div>
                    <input type="text" disabled
                        v-model="listArr.identifyID">
                </div>
                </group>
            </div> -->
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>联系电话</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="listArr.userPhone">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>单位</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="listArr.unitName">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>员工卡号</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="listArr.readCardID">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>人员类型</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="listArr.station">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>{{listArr.station === '管理人员'? '岗位':'工种'}}</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="listArr.Category">
                    </div>
                </group>
            </div>
        </div>
        <myMenu></myMenu>
    </div>
    </div>
</template>
<script type="text/javascript">
import { Tab, TabItem } from 'vux'
import { personDetails } from '@/api/api'
import myMenu from '@/commonComponents/menu'

export default {
    components: {
        Tab,
        TabItem,
        myMenu
    },
    data () {
        return {
            listArr: {},
            param: {
                allowPaging: true,
                data: {
                    id: '-1182204024'
                },
                pageIndex: 0,
                pageSize: 1000
            }
        }
    },
    created () {
        this.param.data.id = this.$route.query.id
    },
    mounted () {
        this.dataArr()
    },
    methods: {
        // 主要数据
        dataArr () {
            personDetails(this.param).then((res) => {
                console.log(res, 123)
                if (res.code === 0) {
                    this.listArr = res.data
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.form-section {
    .vux-tab-selected {
        i {
            font-size: 15px;
            color: #2269ff;
            font-weight: bold;
        }
    }
}
.photo {
    display: block;
    width: 74px;
    height: 74px;
    margin: 20px auto 10px;
    border-radius: 50%;
    overflow: hidden;
}
.photo img {
    width: 100%;
    height: 100%;
}
</style>
